<template>
	<div class="setwrap">
		<div class="titlecommon">农事计划</div>
		<div class="panelben">
			<div class="titlecommon2">
				<span>
					农事计划详情
				</span>
				<div class="btntwo mt-3">
					<div class="btn btn-delete mr-2" @click="goback">
						<span class="text" > 返回 </span>
					</div>
				</div>
			</div>
			<el-divider />
			<div class="d-flex">
				<div class="rightContent flex-1">
					<div class="mb-4">
						<div class="cardHeader mb-3">
							<div class="d-flex ai-center mb-1">
								<img :src="titleIcon" alt="">
								<div class="cardTitle">
									<p class="font-lan-ml">农事计划基本信息</p>
								</div>
							</div>
							<div class="d-flex ai-center">
								<div class="line1"></div>
								<div class="line2"></div>
							</div>
						</div>
						<div>
							<el-form label-position="right" label-width="100px" :model="data.baseInfo" style="max-width: 600px">
								<el-form-item label="模板名称：">
									<span>{{ data.baseInfo.name }}</span>
								</el-form-item>
								<el-row :gutter="16">
									<el-col :span="12">
										<el-form-item label="作物类型：">
											<span>{{ data.baseInfo.type }}</span>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="作物品种：">
											<span>{{ data.baseInfo.crop }}</span>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="16">
									<el-col :span="12">
										<el-form-item label="目标产量：">
											<span>{{ data.baseInfo.yield }}</span>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="土壤质地：">
											<span>{{ data.baseInfo.soilTexture }}</span>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="16">
									<el-col :span="12">
										<el-form-item label="种植密度：">
											<span>{{ data.baseInfo.density }}</span>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="灌溉方式：">
											<span>{{ data.baseInfo.irrigate }}</span>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="16">
									<el-col :span="12">
										<el-form-item label="创建人：">
											<span>{{ data.baseInfo.person }}</span>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="修改日期：">
											<span>{{ data.baseInfo.date }}</span>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</div>
					</div>
					<div>
						<div class="cardHeader mb-3">
							<div class="d-flex ai-center mb-1">
								<img :src="titleIcon" alt="">
								<div class="cardTitle">
									<p class="font-lan-ml">农事阶段农事计划</p>
								</div>
							</div>
							<div class="d-flex ai-center">
								<div class="line1"></div>
								<div class="line2"></div>
							</div>
						</div>
						<div>
							<el-timeline>
								<el-timeline-item v-for="(activity, index) in activities" :key="index" type="primary" size="large">
									<div class="mb-2">
										{{ activity.content }}
									</div>
									<div>
										<div class="mb-2" v-for="(item1, index1) in data.planInfo[index]" :key="index1">
											<div>
												{{ item1.type }} ({{ moment(item1.startDate).format('YYYY-MM-DD') }}-{{
													moment(item1.endDate).format('YYYY-MM-DD') }})
											</div>
											<div v-for="(item2, index2) in item1.list" :key="index2">
												<span class="mr-3">农资类型：{{ item2.type }}</span>
												<span class="mr-3">农资用量：{{ item2.value }}</span>
											</div>
											<div>
												计划描述：{{ item1.remark }}
											</div>
										</div>
									</div>
								</el-timeline-item>
							</el-timeline>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
  
<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import { MoreFilled } from '@element-plus/icons-vue'
import moment from 'moment'
import router from '@/router';

onMounted(async () => {
	//
	let obj = history.state.params
	if (obj) {
		data.baseInfo = { ...obj.baseInfo }
		data.planInfo = { ...obj.planInfo }
	}
});

const activities = [
	{
		content: '耕地',
	},
	{
		content: '种植',
	},
	{
		content: '管理',
	},
	{
		content: '收获',
	},
]

const searchData = reactive({
	keyword: ''
})

const data: any = reactive({
	baseInfo: {},
	planInfo: []
})

const showInfo = ref(false)

const titleIcon = require("@/assets/img/titleIcon.png")

const defaultProps = {
	children: 'children',
	label: 'label',
}

const goback = () => {
	router.go(-1)
}
</script>
  
<style lang="scss">
.setwrap {

	.el-table th.el-table__cell,
	.el-table .el-table__cell,
	.el-table tr,
	.el-table--fit {
		background: transparent !important;
		color: #fff !important;
	}

	.el-table th.el-table__cell.is-leaf,
	.el-table td.el-table__cell {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	}

	.el-pagination.is-background .el-pager li {
		background: transparent !important;
		color: #fff !important;
	}

	.el-pagination.is-background .btn-next {
		background: none !important;
	}

	.btn-prev {
		background: none !important;
	}

	.el-input__wrapper {
		background: rgba(255, 255, 255, 0.08) !important;
		width: 200px;
		border-radius: 200px;
		border: none !important;
		box-shadow: none;
	}
}
</style>
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.setwrap {
	.btn3 {
		width: 100px !important;
		margin-left: 10px;
	}

	.btn7 {
		width: 77px !important;
	}

	.cost {
		margin-top: 20px;
		display: flex;
		justify-content: flex-end;
		font-size: 20px;

		span {
			font-weight: bold;
			font-size: 25px;
			margin-left: 10px;
		}
	}

	.fy {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.total {
			color: rgba(255, 255, 255, 0.6);
			font-size: 10px;

			span {
				font-size: 20px;
			}
		}
	}

	.table {
		margin-top: 20px;
	}

	.btnwrap {
		display: flex;
		align-items: center;

		.btntext {
			color: rgba(49, 127, 245, 1);
			cursor: pointer;
		}

		.delete {
			color: rgba(245, 98, 98, 1) !important;
		}
	}

	.titlecommon2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btn2 {
		width: 70px;
		box-sizing: border-box;
		padding: 5px 10px !important;
		margin-top: 20px;
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: rgba(9, 127, 229, 1);
		font-size: 14px;
		padding: 5px 20px;
		border-radius: 5px;
		cursor: pointer;
	}

	.btn-success {
		background: #67C23A;
	}

	.btn-delete {
		background: #F56C6C;
	}

	.success {
		color: #67C23A
	}

	.leftContent {
		min-width: 300px;
	}

	.cardHeader {
		.cardTitle {
			width: 100%;
			height: 32px;
			padding: 4px 8px;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
		}

		.line1 {
			width: 24px;
			height: 4px;
			background: #0856CC;
			border-radius: 2px 2px 2px 2px;
			opacity: 1;
		}

		.line2 {
			width: 100%;
			height: 2px;
			background: linear-gradient(243deg, rgba(8, 204, 204, 0) 0%, #0856CC 100%);
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
		}
	}
}
</style>
  